<template>
    <div>
        <div class="query-c">
            查询：
            <Input search placeholder="请输入查询内容" style="width: auto" />
        </div>
        <br>
        <Table border :loading="loading" stripe :columns="columns1" :data="tasks">
            <template slot-scope="{ row, index }" slot="action">
                <div>
                    <Button @click="handleDelete(row, index)">删除</Button>
                </div>
            </template>
        </Table>
        <br>
        <!-- <Page :total="tasks.length" show-sizer show-elevator/> -->
    </div>
</template>

<script>
import { findAllMyTasks, deleteMyTasks } from '../api/book'
export default {
  name: 'task',

  data () {
    return {
      tasks: [],
      columns1: [
        {
          title: 'Name',
          key: 'title'
        },
        {
          title: 'Author',
          key: 'author',
          width: 150
        },
        {
          title: 'CreateTime',
          key: 'createTime',
          width: 200
        },
        {
          title: 'Action',
          key: 'action',
          slot: 'action',
          width: 100
          // render: this.renderDownloadButton
        }
      ],
      loading: false
    }
  },

  mounted () {
    this.fetchAllTasks()
  },

  methods: {
    async fetchAllTasks () {
      this.loading = true
      const res = await findAllMyTasks()
      this.tasks = res.data
      this.loading = false
    },

    async handleDelete (row) {
      await deleteMyTasks(row._id)
      this.$Notice.success({
        title: '删除成功!',
        desc: `${row.title} 删除成功!`,
        duration: 5
      })
      this.fetchAllTasks()
    }
  }
}
</script>

<style scoped>

</style>
